<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>04-05</title>
  <style>
  #outer {
      width:200px; height:200px; border:solid 2px black;
      background-color: aqua; 
      position: absolute; top:100px; left:50px;
      padding:10px 10px 10px 10px;
  }
  #inner {
      width:100px; height:100px; border:solid 2px black;
      background-color:yellow;
  }
  </style>
  <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="example">
    <div id="outer" @click="outerClick">
        <div id="inner" @click="innerClick"></div>
    </div>
</div>
<script type="text/javascript">
var vm = new Vue({
  el : "#example",
  methods : {
    outerClick : function(e) {
        console.log("### OUTER CLICK")
        console.log("Event Phase : ", e.eventPhase);
        console.log("Current Target : ", e.currentTarget);
        console.log("Target : ", e.target);
    },
    innerClick : function(e) {
        console.log("### INNER CLICK")
        console.log("Event Phase : ", e.eventPhase);
        console.log("Current Target : ", e.currentTarget);
        console.log("Target : ", e.target);    
    }
  }
})
</script>
</body>
</html>